<template>
    <!-- 通过底部标签切换显示不同组件 -->
    <router-view/>
    <!-- 底部标签页 -->
    <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item name="search" icon="search">发现</van-tabbar-item>
        <van-tabbar-item name="orders" icon="friends-o">订单</van-tabbar-item>
        <van-tabbar-item name="user" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import {ref,watch,getCurrentInstance} from 'vue';

   const {proxy} = getCurrentInstance();

const active = ref('home');

 watch(active,(newValue,oldValue)=>{
    proxy.$router.push("/main/"+active.value);
 })

</script>

<style>
</style>